<template>
  <div class="index">
    <Header curRoute="notarizaCheckPage"></Header>
    <div class="banner">
      <img src="@/assets/images/check-banner1-2.jpg" alt="" srcset="" />
    </div>
    <div class="section product">
      <div class="section-wrap">
        <div class="section-tit">
          <img style="height: 117px" src="@/assets/images/check-tit1.png" alt="" srcset="" />
        </div>
        <div class="section-content product-content">
          <ul>
            <li>
              <img src="@/assets/images/check-icon1.png" alt="" srcset="" />
              <span>登录、身份核验</span>
            </li>
            <li>
              <img src="@/assets/images/check-icon2.png" alt="" srcset="" />
              <span>公证文件存证</span>
            </li>
            <li>
              <img src="@/assets/images/check-icon3.png" alt="" srcset="" />
              <span>获取数据指纹</span>
            </li>
            <li>
              <img src="@/assets/images/check-icon4.png" alt="" srcset="" />
              <span>提交数据指纹与公证书</span>
            </li>
            <li>
              <img src="@/assets/images/check-icon5.png" alt="" srcset="" />
              <span>完成查询核验</span>
            </li>
          </ul>
          <router-link :to="{name: 'notarizaCheck'}" class="product-check-btn">开始核验</router-link>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { Header, Footer } from '@/components';

/**
 * 首页
 * @Author yuanyexu
 * @Date 2021-09-01
 */
export default defineComponent({
  name: 'NotarizaCheckPage',
  components: {Header, Footer},
  setup() {
    return {};
  },
});
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.banner {
  width: 100%;
  min-width: 1200px;
  img {
    display: block;
    width: 100%;
  }
}
.section {
  .section-wrap {
    width: 1200px;
    margin: 0 auto;
  }
  &-tit {
    padding: 60px 0 50px;
    img {
      display: block;
      height: 120px;
      margin: 0 auto;
    }
  }
}
.product {
  background: #f6f6f6;
  &-content {
    ul {
      @extend %clearfix;
      li  {
        width: 20%;
        float: left;
        text-align: center;
        margin-bottom: 45px;
        img {
          display: block;
          margin: 0 auto;
        }
        span {
          display: block;
          text-align: center;
          font-size: 24px;
          line-height: 70px;
        }
      }
    }
  }
  &-check-btn {
    display: block;
    width: 80%;
    height: 50px;
    background: #f42923;
    color: #fff;
    text-align: center;
    line-height: 50px;
    margin: 50px auto;
    border-radius: 50px;
    font-size: 20px;
  }
}
</style>
